<template>
    <div>
        <!-- This is Film page -->
        <!-- 轮播 -->
        <swiper :key="swiperList.length" ref="myswiper">
            <div class="swiper-slide" v-for="data in swiperList" :key="data.id">
                <img :src="data.pic" />
            </div>
        </swiper>
        <headerbar :class="isFixed ? 'fixed' : ''"></headerbar>
        <router-view></router-view>
    </div>
</template>

<script>
import swiper from '../../components/02/FilmSwiper.vue';
import headerbar from '../../components/02/Headerbar.vue';

export default {
    data() {
        return {
            swiperList: [
                { id: 1001, pic: 'http://www.pwser.com/images/201512/pic1.jpg' },
                { id: 1002, pic: 'http://www.pwser.com/images/201512/pic2.jpg' },
                { id: 1003, pic: 'http://www.pwser.com/images/201512/pic3.jpg' }
            ],
            isFixed: false
        };
    },
    components: {
        swiper,
        headerbar
    },
    mounted() {
        // 注意这是注册监听函数，函数不要加括号
        window.onscroll = this.handleScroll;
    },
    // 销毁组件解绑事件
    beforeDestroy() {
        window.onscroll = null;
    },
    methods: {
        handleScroll() {
            if (document.documentElement.scrollTop >= this.$refs.myswiper.$el.offsetHeight) {
                this.isFixed = true;
            } else {
                this.isFixed = false;
            }
        }
    }
};
</script>

<style lang="scss" scoped>
img {
    width: 100%;
    height: 150px;
}
</style>
